<template>
	<div class="numericalView">
		<title-common style="margin-bottom: 10px" v-if="config.showTitle" :config="config"></title-common>
		<div class="numericalView-common" :class="[stylesCommon.nndicatorStyle==2?'numericalView-common-style':'']" :style="{'background':stylesCommon.nndicatorStyle==2?stylesCommon.background:''}">
			<div style="min-width: 120px;overflow: hidden" :style="{'width':mobile?100/stylesCommon.mobileLineNumber+'%':100/stylesCommon.lineNumber+'%'}" v-for="(item,index) in data" :key="index">
				<div class="numericalView-list" :style="getStyleCommon()">
					<div class="numericalView-list-le" v-if="stylesCommon.iconShow && item.icon">
                        <div :style="{'background':item.icon.color}" class="numericalView-list-icon">
                            <rx-icon-show size="26px" :icon="item.icon.icon"></rx-icon-show>
                        </div>
                    </div>
					<div class="numericalView-list-ri">
						<div class="numericalView-ri-name" :title="item[columns[0].key]" :style="{'font-size':stylesCommon.style[0].fontSize+'px','font-weight':stylesCommon.style[0].fontWeight,'color':stylesCommon.style[0].color}">{{item[columns[0].key]}}</div>
						<div class="numericalView-host" v-if="columns.length>1">
							<span class="numericalView-host-name" :style="getStyle(1)">{{columns[1].title}}</span>
							<span  class="numericalView-host-number" :style="getStyle(2)"><span v-if="columns[1].prefix">{{columns[1].prefix}}</span>{{formattedData(item[columns[1].key],columns[1])}}<span v-if="columns[1].suffix">{{columns[1].suffix}}</span></span>
						</div>
						<div v-show="columns.length>2" v-for="(chile,index1) in columns" :key="index1">
							<div v-if="index1>1" class="numericalView-next">
								<span :style="getStyle(3)">{{chile.title}}</span>
								<span :style="getStyle(4)">
                                    <span v-if="chile.prefix">{{chile.prefix}}</span>
                                    {{formattedData(item[chile.key],chile)}}
                                    <span v-if="chile.suffix">{{chile.suffix}}</span></span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
/*
指标卡
 */
import ComponentView from "@/views/modules/preview/components/common/component-view.js";
import ScreenViewManageApi from "@/api/screen/core/screen-view-manage.js";
import busEvent from "@/views/modules/preview/components/js/bus-event.js";
export default {
	name: "numerical-view",
	mixins:[ComponentView,busEvent],
	data(){
		return{
			data:[],
			columns: [],//列头
			stylesCommon:{},
			params:{},
			customArr: ['customIcon', 'userCustomIcon']
		}
	},
	 props:['mobile'],
	created() {
		this.getUrlParam();
		this.stylesCommon = this.config.styles.stylesCommon;
	},
	methods:{
		getData(){
			this.columns=[];
			this.data=[];
			//静态数据模式
			if(this.config.dataSources.source=="static") {
				if (this.config.dataSources.staticData) {
					//静态数据
					let staticData = JSON.parse(this.config.dataSources.staticData);
					this.columns=staticData.columns;
					this.data=staticData.data;
					this.reconsitution()
				}
			}else {
				if(!this.config.dataSources.dimensions || this.config.dataSources.dimensions.length==0){
					return;
				}
				let dimension=this.config.dataSources.dimensions[0];
				let measures = this.config.dataSources.measures;
				this.columns.push({
					title:dimension.fieldLabel,
					key:dimension.tableName + '_' + dimension.fieldName
				})
				if(measures.length ==0){
					this.data =[];
					this.reconsitution()
					return;
				}
				for (let i = 0; i < measures.length; i++) {
					let measure=measures[i];
					this.columns.push({
						title:measure.fieldLabel,
						key:measure.tableName + '_' + measure.fieldName
					})
				}
				let obj={
					dataModel:this.config.dataSources.dataModel,
					measures:this.config.dataSources.measures,
					dimensions:this.config.dataSources.dimensions,
					params:this.params,
					colorLegends:[],
					filterParams:[],
					resultNum:this.config.dataSources.resultNum
				}
				let self=this;
				//获取数据
				ScreenViewManageApi.getData(JSON.stringify(obj)).then(res => {
					this.data=res && res.data? res.data : [];
					//重构数据添加iconfont
					this.reconsitution()
				});
			}
		},
		reconsitution(){
			let key = 0;
			this.data.filter(res=>{
				if(key ==this.stylesCommon.iconLIist.length){
					key = 1
				}else {
					key ++
				}
                res['icon']=this.stylesCommon.iconLIist[key-1];
				return res
			})
		},
		getStyle(index){
			let style = {'font-size':this.stylesCommon.style[index].fontSize+'px','font-weight':this.stylesCommon.style[index].fontWeight,'color':this.stylesCommon.style[index].color}
			return style
		},
		getStyleCommon(){
			let style = {}
			if(this.stylesCommon.nndicatorStyle ==1){
				style = {'border-radius':'5px','flex-direction':this.stylesCommon.iconLocation =='top'?'column':'','margin-left':this.stylesCommon.interval/2+'px','margin-right':this.stylesCommon.interval/2+'px','margin-bottom':this.stylesCommon.interval/2+'px','margin-top':this.stylesCommon.interval/2+'px','background':this.stylesCommon.background,'border':this.stylesCommon.borderShow? this.stylesCommon.borderNumber+'px solid '+this.stylesCommon.borderColor:''}

			}else {
				style = {'flex-direction':this.stylesCommon.iconLocation =='top'?'column':'','padding-left':this.stylesCommon.interval/2+'px','padding-right':this.stylesCommon.interval/2+'px','margin-bottom':this.stylesCommon.interval/2+'px','margin-top':this.stylesCommon.interval/2+'px','border-right':this.stylesCommon.borderShow? this.stylesCommon.borderNumber+'px solid '+this.stylesCommon.borderColor:''}
			}
			return style
		},
		getUrlParam(){
			if(!this.config || !this.config.advancedConf || !this.config.advancedConf.receive){
				return;
			}
			let mapping = this.config.advancedConf.receive.mapping;
			//筛选器默认参数值
			let filterParams= this.getFilterParams();
			if(mapping && mapping.length>0 ){
				let params={};
				if (this.$route.meta.query) {
					params = JSON.parse(this.$route.meta.query);
				}else {
					params=this.$route.query;
				}
				for (let i = 0; i < mapping.length; i++) {
					let value="";
					if(this.config.advancedConf.receive.type=='url'){
						if(mapping[i].valueSource=='param'){
							if(params[mapping[i].valueDef]){
								value=params[mapping[i].valueDef]
							}else {
								let arr = mapping[i].name.split(".");
								let name=arr[arr.length-1];
								if(params[name]){
									value=params[name];
								}
							}
						}

					}else  if(filterParams && mapping[i].valueSource=='param'){
						//计算筛选器默认值
						if(filterParams[mapping[i].valueDef]){
							value=filterParams[mapping[i].valueDef]
						}else {
							let arr = mapping[i].name.split(".");
							let name=arr[arr.length-1];
							if(filterParams[name]){
								value=filterParams[name];
							}
						}
					}
					this.params[mapping[i].name]=value;
				}
			}
		},
		handReceive(args){
			let receive = this.config.advancedConf.receive;
			if ( (receive.type=='event' &&receive.publishComponent == args.component)) {
				let inputParams = args.params;
				let params = {};
				//读取配置的参数
				for (let i = 0; i < receive.mapping.length; i++) {
					let o = receive.mapping[i];
					if (o.valueSource == 'param' && inputParams[o.valueDef]) {
						params[o.name] = inputParams[o.valueDef];
					}
				}
				this.params=params;
				this.getData()
			}
		},
		//格式化数据
		formattedData(value,obj){
			//千分位
			if(obj.formatter =='thousands'){
				value=(value+ '').replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g,'$1,');
			}else if(obj.formatter =='percentage'){
				//百分比
				if(obj.decimal && obj.decimal=='notHandle'){
					value =(value*100)+'%';
				}else if(obj.halfAdjust){
					value = this.roundFixed(value*100,obj.decimal) +'%'
				}else {
					value = this.toFixed(value*100,obj.decimal) +'%'
				}
			}else if(obj.formatter =='trillion'){
				//千，万，亿
				if(obj.decimal && obj.decimal=='none'){
					value = this.thousands(value);
				}else{
					value = this.thousands(value,obj);
				}
			}else if(obj.decimal!='none'){
				value = this.toFixed(value,obj.decimal);
			}
			return value;
		},
		//千分位
		thousands(value,decimals){
			let newValue=0;
			if(!decimals){
				if (value >= 100000000) {
					newValue=value / 100000000 + "亿";
				} else if (value >= 10000000) {
					newValue=value / 10000000 + "千万";
				} else if (value >= 1000000) {
					newValue=value / 1000000 + "百万";
				}else if (value >= 10000) {
					newValue=value / 10000 + "万";
				} else if (value >= 1000) {
					newValue=value / 1000 + "千";
				} else {
					newValue=value;
				}
			}else if(decimals.halfAdjust){
				if (value >= 100000000) {
					newValue=this.roundFixed(value / 100000000,decimals.decimal) + "亿";
				} else if (value >= 10000000) {
					newValue=this.roundFixed(value / 10000000,decimals.decimal) + "千万";
				} else if (value >= 1000000) {
					newValue=this.roundFixed(value / 1000000,decimals.decimal) + "百万";
				}else if (value >= 10000) {
					newValue=this.roundFixed(value / 10000,decimals.decimal) + "万";
				} else if (value >= 1000) {
					newValue=this.roundFixed(value / 1000,decimals.decimal) + "千";
				} else {
					newValue=this.roundFixed(value,decimals.decimal);
				}
			}else {
				if (value >= 100000000) {
					newValue=this.toFixed(value / 100000000,decimals.decimal) + "亿";
				} else if (value >= 10000000) {
					newValue=this.toFixed(value / 10000000,decimals.decimal) + "千万";
				} else if (value >= 1000000) {
					newValue=this.toFixed(value / 1000000,decimals.decimal) + "百万";
				}else if (value >= 10000) {
					newValue=this.toFixed(value / 10000,decimals.decimal) + "万";
				} else if (value >= 1000) {
					newValue=this.toFixed(value / 1000,decimals.decimal) + "千";
				} else {
					newValue=this.toFixed(value,decimals.decimal);
				}
			}
			return newValue;
		},
		//保留小数
		toFixed(value,type){
			switch (type) {
				case 'roundNumbers':
					value = Math.floor(value * 1) / 1;
					break;
				case 'oneDecimals':
					value = Math.floor(value * 10) / 10;
					break;
				case 'twoDecimals':
					value = Math.floor(value * 100) / 100;
					break;
				case 'threeDecimals':
					value = Math.floor(value * 1000) / 1000;
					break;
			}
			return value
		},
		roundFixed(num, type) {//修改js四舍五入
			let  fixed =0;
			switch (type) {
				case 'roundNumbers':
					fixed =0;
					break;
				case 'oneDecimals':
					fixed=1;
					break;
				case 'twoDecimals':
					fixed=2;
					break;
				case 'threeDecimals':
					fixed=3;
					break;
			}
			let pos = num.toString().indexOf('.'),
				decimal_places = num.toString().length - pos - 1,
				_int = num * Math.pow(10, decimal_places),
				divisor_1 = Math.pow(10, decimal_places - fixed),
				divisor_2 = Math.pow(10, fixed);
			return Math.round(_int / divisor_1) / divisor_2;
		},
	},
	watch:{
	}
}
</script>

<style scoped>
.numericalView-next{
	display: flex;
	color: white;
	margin-right: 20px;
	margin-bottom: 4px;
}
.numericalView-next span:nth-child(2){
	flex: 1;
	text-align: right;
}
.numericalView-ri-name{
	font-size: 16px;
	color: white;
	line-height: 36px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.numericalView-host-name{
	font-size: 12px;
	color: #ffffff;
	margin-top: 10px;
}
.numericalView-host-number{
	font-size: 20px;
	color: #4285f4;
}
.numericalView-host{
	display: flex;
	flex-direction: column;
	margin-bottom: 8px;
}
.numericalView-common-style{
	border-radius: 5px;
}
.numericalView-list-icon{
	width: 36px;
	height: 36px;
	margin-left: 30px;
	text-align: center;
	background-color: #4285f4;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
    color: white;
}
.numericalView-list-le{
	width:70px;
	margin-bottom: 10px;
}
.numericalView-list-ri{
	flex: 1;
	margin-left: 20px;
    overflow: hidden;
}
.numericalView-common{
	display: flex;
	flex-wrap: wrap
}
.numericalView-list{
	display: flex;
	padding: 20px 0px;
    height: calc(100% - 10px);
}
.numericalView{
	height: 100%;
	width: 100%;
}
</style>
